<script lang="ts">
export default {
  name: "Bar"
};
</script>

<script setup lang="ts">
import { ECharts } from "echarts";
import echarts from "/@/plugins/echarts";
import { onMounted, nextTick, ref } from "vue";
import { tryOnUnmounted, useTimeoutFn } from "@vueuse/core";

import {
  addResizeListener,
  removeResizeListener
} from "element-plus/lib/utils/resize-event";

import { postProjectAcceptbill } from "/@/api/analysis";

const bar = ref<HTMLElement | null>(null) as any;

let echartInstance: ECharts;

let xAxisData = ref([]);
let seriesData = ref([]);

function initechartInstance(xAxisData, seriesData) {
  const echartDom = document.querySelector(".bar");
  if (!echartDom) return;
  // @ts-ignore
  echartInstance = echarts.init(echartDom);
  echartInstance.clear(); //清除旧画布 重新渲染

  echartInstance.setOption({
    color: ["#59a0ff", "#00e6ad", "#ffc500"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    legend: {},
    grid: {
      bottom: "20%",
      height: "68%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          interval: 0,
          width: "70",
          overflow: "truncate"
        },
        data: xAxisData
        // ["1月", "2月", "3月", "4月"]
      }
    ],
    yAxis: [
      {
        type: "value"
      }
    ],
    series: seriesData
    // [
    //   {
    //     name: "open_issues",
    //     type: "bar",
    //     stack: "total",
    //     data: [98, 204, 600, 456]
    //   },
    //   {
    //     name: "forks",
    //     type: "bar",
    //     stack: "total",
    //     data: [87, 123, 234, 652]
    //   },
    //   {
    //     name: "watchers",
    //     type: "bar",
    //     stack: "total",
    //     data: [67, 265, 345, 543]
    //   },
    //   {
    //     name: "star",
    //     type: "bar",
    //     stack: "total",
    //     data: [79, 334, 534, 345]
    //   }
    // ]
  });
}
const sumArr = arr => {
  return arr.reduce(function (total, value) {
    return total + value;
  }, 0);
};

const initProjectNum = async () => {
  try {
    const { code, data } = await postProjectAcceptbill({});
    if (code === 200) {
      xAxisData.value = data.xAxisData;
      seriesData.value = data.series;
      seriesData.value[seriesData.value.length - 1]["label"] = {
        show: true,
        position: "top",
        formatter: params => {
          const arr = [];
          const dataIndex = params.dataIndex;
          seriesData.value.forEach(el => {
            arr.push(el.data[dataIndex]);
          });
          console.log(arr);
          return sumArr(arr);
        }
      };

      nextTick(() => {
        initechartInstance(xAxisData.value, seriesData.value);
      });
    }
  } catch (err) {
    console.log(err);
  }
};

initProjectNum();

onMounted(() => {
  nextTick(() => {
    addResizeListener(bar.value, resetRender);
  });
  // useEventListener("resize", () => {
  //   console.log("resize");
  //   if (!echartInstance) return;
  //   useTimeoutFn(() => {
  //     echartInstance.resize();
  //   }, 180);
  // });
});

const resetRender = () => {
  if (!echartInstance) return;
  useTimeoutFn(() => {
    echartInstance.resize();
  }, 180);
};

tryOnUnmounted(() => {
  if (!echartInstance) return;
  echartInstance.dispose();
  echartInstance = null;
  removeResizeListener(bar.value, resetRender);
});
</script>

<template>
  <div ref="bar">
    <div class="title">
      <slot> </slot>
    </div>
    <div class="bar"></div>
    <p>自2022年2月15日培训后开始统计系统使用数据</p>
  </div>
</template>

<style scoped>
.title {
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 10px;
}
.bar {
  width: 100%;
  height: 250px;
}
p {
  text-align: right;
  color: #7a7d83;
  font-size: 12px;
}
</style>
